<template>
  <!-- 排行榜路由 -->
  <div id="rankinglist">
    <LeftNav @choice-ranking-list="choiceRankingList"></LeftNav>
    <RightContent
      @ranking-list-pic-click="rankingListPicClick"
      @add-play-song="addPlaySong"
      @add-all-song-to-music-list="addAllSongToMusicList"
    ></RightContent>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  provide,
  ref,
  toRefs,
  reactive,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import LeftNav from "@/components/rankinglistChild/LeftNav.vue";
import RightContent from "@/components/rankinglistChild/RightContent.vue";
import { handleTopList, handleSong } from "@/network/rankinglist/rankinglist";
export default defineComponent({
  name: "RankingList",
  components: {
    LeftNav,
    RightContent,
  },
  setup() {
    let topList = ref([]); // 所有榜单数据
    let topListDetail = ref({}); // 一个榜单的详情
    let songs = ref([]); // 榜单歌曲数据
    let data = reactive({
      songParams: {
        // 获取歌单的参数信息
        offset: 0,
        limit: 100,
        id: 0,
      },
    });
    const router = useRouter();
    const store = useStore();

    provide("topList", topList);
    provide("topListDetail", topListDetail);
    provide("songs", songs);

    onMounted(() => {
      getTopList();
    });

    // 获取所有榜单请求
    let getTopList = async () => {
      let res = await handleTopList();
      topList.value = res.list;
      topListDetail.value = res.list[0]; // 初始化第一个榜单
      data.songParams.id = res.list[0].id;
      if (data.songParams.id != 0) {
        getSong(data.songParams);
      }
    };

    // 获取排行榜歌曲
    let getSong = async (params) => {
      let res = await handleSong(params);
      songs.value = res.songs;
    };

    // 子组件LeftNav的点击事件
    let choiceRankingList = (item) => {
      data.songParams.id = item.id;
      topListDetail.value = topList.value[item.index];
      getSong(data.songParams);
    };

    // 点击榜单图片事件
    let rankingListPicClick = () => {
      store.dispatch("saveSongListDetail", topListDetail.value);
      router.push("/playlist");
    };

    // 双击播放歌曲事件
    let addPlaySong = (item) => {
      store.dispatch("addPlaySong", item);
    };

    // 添加所有的歌曲到播放列表
    let addAllSongToMusicList = () => {
      store.dispatch("addAllSongToMusicList", songs.value);
    };

    return {
      ...toRefs(data),
      choiceRankingList,
      rankingListPicClick,
      addPlaySong,
      addAllSongToMusicList,
    };
  },
});
</script>
<style scoped>
#rankinglist {
  width: 100%;
  display: flex;
  background-color: #fff;
}
</style>
